<template>
	<view class="content">
		<view class="top">
			<img src="https://cdn.yueyangshuyuan.com/3%E5%A4%A7%E6%9D%83%E7%9B%8A.png" />
		</view>
		<view class="nav">
			<view class="navTop clearfix">
                <view class="list">
					<view class="left">
						<img class="img" src="https://cdn.yueyangshuyuan.com/1.png" />
					</view>
					<view class="right">
						<p class="big">专属折扣</p>
						<p class="smail">会员专享折扣优惠</p>
					</view>
				</view>
				<view class="list">
					<view class="left">
						<img class="img"  src="http://cdn.yueyangshuyuan.com/2.png" />
					</view>
					<view class="right">
						<p class="big">积分奖励</p>
						<p class="smail">尊享双倍积分奖励</p>
					</view>
				</view>
				<view class="list listLast">
					<view class="left">
						<img class="img"  src="http://cdn.yueyangshuyuan.com/3.png" />
					</view>
					<view class="right">
						<p class="big">专属客服</p>
						<p class="smail">优先解答疑问</p>
					</view>
				</view>
			</view>
			<p class="bu"></p>
			<view class="vipList clearfix">
				<view class="left">
					<span>会员名称</span>
				</view>
				<view class="right">
					<span>{{memberLIst.name}}</span>
				</view>
			</view>
			<view class="vipList clearfix">
				<view class="left">
					<span>有效期限</span>
				</view>
				<view class="right">
					<span>{{memberLIst.num }}<span>{{memberLIst.unit=='YEAR'?'年':memberLIst.unit=='MONTH'?'月':memberLIst.unit=='WEEK'?'周':'天'}}</span></span>
				</view>
			</view>
			<view class="vipList clearfix">
				<view class="left">
					<span>应付金额</span>
				</view>
				<view class="right">
					<span class="bigNum">¥{{memberLIst.realPrice}}.00</span>
					<span class="smailNum">¥{{memberLIst.price}}.00</span>
				</view>
			</view>
			<view class="readRules clearfix" @tap.stop="changeFlag">
                 <img src="https://cdn.yueyangshuyuan.com/check.png"  v-if="flag" />
				 <img src="https://cdn.yueyangshuyuan.com/checkOn.png" v-else />
				 <span class="agree">我已阅读并同意</span>
				 <span class="roules" @tap.stop="goDetailRoules">《阅阳会员服务协议》</span>
			</view>
		</view>
		<view class="changeBtn" @click="vipPlayFun">立即支付</view>
		<!-- <view class="changeBtn changeBtnNew" v-if="!timeOut">立即支付</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true,
				memberLIst:"",
				orderId:"",
				// timeOut:false,
			}
		},
		created() {
	        this.init();
		},
		onLoad:function(options){
			// console.log(options.merchId,8080808);
			// this.init();
		},
		methods:{
			init(){
				this.$api.defaultVip({
					
				}).then((json)=>{
					this.memberLIst=json;
					//查商品id
					
				})
			},
             changeFlag(){
				//  console.log(this.flag,88888);
				 this.flag=!this.flag;
			 },
			 //vip会员支付
			 vipPlayFun(){
				 if(this.flag==true){
                    uni.showToast({
						title: "请先点击阅读阅阳服务协议!",
						icon: 'none',
					});
					return false;
				 }
				 this.$api.memberMerchOrderVip({
						memberMerchId:this.memberLIst.id
					}).then((json)=>{
						this.orderId=json;
						// this.timeOut=true;
						this.requestPayment();
					})
                
			 },
			 async requestPayment(){
				let orderInfo = await this.getOrderInfo();
				console.log(orderInfo ,'orderInfo')
				if(orderInfo.code == -1) {
					uni.showModal({
						content: orderInfo.message,
						showCancel: false
					})
					return;
				}
			
				orderInfo.data.package = orderInfo.data.packageValue
				uni.requestPayment({
					provider: 'wxpay',
					...orderInfo.data,
					success: (e) => {
						console.log("success", e);
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
						});
						this.$api.orderResult({
							id:this.orderId
						}).then(()=>{
							uni.redirectTo({
								url: '/pages/membersVip/membersVip'
							});
						})
						
						// this.ToOrderDetail(this.preDataId);
					},
					fail: (e) => {
						console.log("fail", e);
						if(e.errMsg == "requestPayment:fail cancel"){//商户取消
							this.payTips = true;
						}else{
							uni.showModal({
								content: "支付失败!",
								showCancel: false
							})
						}
					},
					complete: () => {
						// this.providerList[index].loading = false;
					}
				})
			},
			getOrderInfo() {
				return new Promise((res,rej) => {
			        this.$api.orderPrepay({
						orderId:this.orderId,
						appType:1
					}).then(json=>{
						res(json);
					})
				});
			},
			 goDetailRoules(){
				uni.navigateTo({
					url: '/pages/serviceAgreement/serviceAgreement'
				});
			 }
		},
	}
</script>

<style lang="scss">
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
	.content {
	    padding:0;
		margin:0;
		background: #fff;
		box-sizing: border-box;
		padding-bottom: 138upx;
		.top {
			img {
				display: block;
				width:750upx;
				height:367upx;
			}
		}
		.nav {
			.navTop {
				width:750upx;
				background: #fff;
				padding:45upx 45upx 40upx 45upx;
				box-sizing: border-box;
				.list {
					float: left;
					width:200upx;
					margin-right:30upx;
					.left {
						float: left;
						// height:70upx;
					   margin-right:20upx;
				    }	
					.img {
						display: block;
						width:16upx;
						height:31upx;
						margin-top:10upx;
					}
					.right {
						float: left;
						// height:70upx;
						.big {
							font-size: 28upx;
                            color: #262626;
						}
						.smail {
							font-size: 20upx;
							color: #777777;
							letter-spacing: 0;
							line-height: 50upx;
						}
					}
				}
				.listLast {
					margin-right:0;
				}
			    
			}
			.bu {
                height:20upx;
				width:100%;
				background: #FAFAFA;
			}
			.vipList {
				padding:32upx 36upx;
				box-sizing: border-box;
				border-bottom: 2upx solid #E2E6EE;
				.left {
					float: left;
					width:150upx;
					font-size: 28upx;
                    color: #262626;
				} 
				.right {
					float: left;
					font-size: 28upx;
                    color: #777777;
					.bigNum {
						float: left;
						font-size: 28upx;
                        color: #E65126;
						margin-right:20upx;
					}
					.smailNum {
						float: left;
						text-decoration:line-through;
						font-size: 20upx;
                        color: #777777;
						line-height: 40upx;
					}
				}
			}
			.readRules {
				padding:36upx;
				box-sizing: border-box;
				img {
					float:left;
					width:32upx;
					height:32upx;
					margin-top:2upx;
					margin-right: 20upx;
				}
                .agree {
					float:left;
					font-size: 28upx;
                    color: #777777;
					margin-right: 15upx;
				}
				.roules {
					float:left;
					font-size: 28upx;
                    color: #3D84FF;
				}
			}
		}
	}
	body {
		background: #fff;
	}
	.changeBtn {
		width:100%;
		height:108upx;
		background: #E25422;
        box-shadow: 0 -10px 16px 0 rgba(164,164,164,0.20);
		font-size: 32upx;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		line-height: 108upx;
		position: fixed;
		left:0;
		bottom: 0;
		z-index: 9;
	}
	.changeBtnNew {
		background:#ccc;
	}
</style>
